<template>
  <div class="myheader">
    <div class="topline">
      <div class="maincontent">
        <div class="loginline">
          <div class="welcome">您好，欢迎来到海豚彩票</div>
          <div class="login-line">
            <router-link to="/login">登录</router-link>
            <router-link to="/register">免费注册</router-link>  
          </div>
        </div>
      </div>
    </div>
    <div class="flex-line maincontent">
      <a href="/" class="logo"><img alt="" :src="logoUrl"></a>
    </div>
  </div>
</template>

<script>
import {baseObj} from '../util/util' 
export default {
  name: 'my-header',
  data () {
    return {
      logoUrl: '../../static/images/logo.jpg'
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.topline{height: 35px;background: #f5f5f5;line-height: 35px;color: #717171;}
.topline .loginline{overflow: hidden;}
.topline .welcome{float: left;color: #717171;}
.topline .welcome .money, .topline .welcome .point {font-weight: bold;color: red;padding: 0 3px;}
.topline .login-line{float: right;}
.topline .login-line a{display: block;padding: 0 10px;float: left;}
.topline .login-line a#reg{border-left: 1px solid #ddd;}
.topline .login-line a:link{color: #444;}
.flex-line{}
.flex-line .logo{width: 180px;float: left;}
.flex-line .logo img{width: 100%;}
.flex-line .ady{width:200px;float: left;}
.flex-line .kf{width:120px;float: right;}
.flex-line .kf img{width:100%;}
.maincontent{width: 1000px;margin: 0 auto;overflow: hidden;}
</style>
